<template>
    <div>
        <table @click="del($event)">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-html="str">
                
            </tbody>
        </table>
        <button @click="add()">添加</button>
        <div class="box" v-show="flag">
            <p @click="flag=false">x</p>
            <p>姓名: <input type="text" placeholder="请输入姓名" v-model="name"> </p>
            <p>年龄: <input type="text" placeholder="请输入年龄" v-model="age"> </p>
            <p>爱好: <input type="text" placeholder="请输入爱好" v-model="like"> </p>
            <button @click="sub()">提交</button>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                flag:false,
                name:"",
                age:"",
                like:"",
                str:`<tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>敲代码</td>
                    <td><button class="del">删除</button></td>
                </tr>`
            }
        },
        methods:{
            add(){
                this.flag=true;
            },
            sub(){
                this.str+=`
                    <tr>
                        <td>${this.name}</td>
                        <td>${this.age}</td>
                        <td>${this.like}</td>
                        <td><button class="del">删除</button></td>
                    </tr>
                `
            },
            del:function(e){
                console.log(e.target.className);
                if(e.target.className==="del"){
                    e.target.parentNode.parentNode.remove();
                }
            }
        }
    }
</script>

<style lang="less" scoped>
table{
    width: 500px;
    border: 1px solid #000;
    border-collapse: collapse;
    text-align: center;
    th,td{
        border: 1px solid #000;
    }
}
.box{
    height: 300px;
    width: 300px;
    background: skyblue;
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    p{
        margin: 20px 0;
    }
    p:first-child{
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
    }
}
</style>